import React, { Component } from 'react'
import PropTypes from 'prop-types'
import configs from '@/modules/mapping'
import { isNil, isEqual } from 'loadsh'
import classNames from 'classnames'
import CardHead from './cardHead/index'
import CardBody from './cardBody/index'
import styles from './style.module.less'

// 是否开启图像加载动画和空状态
const openGraphStatus = true
class Card extends Component {
  constructor(props) {
    super(props)
    const propsLoading = isNil(configs[props.cardType].loading)
      ? openGraphStatus
        ? !!configs[props.cardType].echarts
        : false
      : configs[props.cardType].loading

    this.state = {
      isLoading: propsLoading,
      isEmpty: false,
      filters: configs[props.cardType].filters || {}
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState)
  }

  setFilters = (newFilters) => {
    this.setState((state) => ({
      ...state,
      filters: { ...state.filters, ...newFilters }
    }))
  }

  openLoading = () => {
    this.setState({
      isLoading: true,
      isEmpty: false
    })
  }

  closeLoading = () => {
    this.setState({
      isLoading: false,
      isEmpty: false
    })
  }

  renderEmptyData = () => {
    this.setState({
      isLoading: false,
      isEmpty: true
    })
  }
  render() {
    const { filters, isLoading, isEmpty, zoomShow } = this.state
    const {
      id,
      style = {},
      cardType,
      echartsLoading = false,
      echartsData,
      title,
      loading,
      settings = {},
      hasPermission = true
    } = this.props
    const {
      name,
      renderCustom,
      hideHeader,
      cardClassName,
      cardHeadClassName,
      ...otherProps
    } = configs[cardType]
    const withSpaceSize = isNil(configs[cardType].withSpaceSize)
      ? {}
      : { margin: configs[cardType].withSpaceSize }
    return (
      <div
        id={id}
        className={classNames(styles.cardWrapper, cardClassName, `${zoomShow ? 'enLarge' : ''}`)}
        style={{ ...withSpaceSize, ...style }}
        data-type={cardType}>
        {!hideHeader && (
          <CardHead
            title={title || name}
            zoomShow={zoomShow}
            cardHeadClassName={cardHeadClassName}
            renderCustom={renderCustom}
            filters={filters}
            settings={settings}
            setFilters={this.setFilters}
            hasPermission={hasPermission}
          />
        )}
        <CardBody
          loading={loading}
          isLoading={isLoading}
          hasPermission={hasPermission}
          openGraphStatus={openGraphStatus}
          isEmpty={isEmpty}
          hideHeader={hideHeader}
          zoomShow={zoomShow}
          toggleZoomShow={this.toggleZoomShow}
          renderEmptyData={this.renderEmptyData}
          openLoading={this.openLoading}
          closeLoading={this.closeLoading}
          setFilters={this.setFilters}
          echartsLoading={echartsLoading}
          echartsData={echartsData}
          {...otherProps}
          filters={filters}
          settings={settings}
        />
      </div>
    )
  }
}

Card.propTypes = {
  id: PropTypes.string,
  style: PropTypes.object,
  cardType: PropTypes.string.isRequired,
  echartsLoading: PropTypes.bool,
  echartsData: PropTypes.object,
  title: PropTypes.string,
  loading: PropTypes.bool,
  settings: PropTypes.object,
  hasPermission: PropTypes.bool
}

export default Card
